<style type="text/css">

 img {border: none;}

.container {
	overflow: hidden;
	width: 1000px;
	margin: 0 auto;
}
#main {
	padding: 10px;
	background: #f0f0f0;
	border: 1px solid #ccc;
}
a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
	width: 1000px; height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #fff;
    align: center;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;
	padding: 10px;
	align: center;
	color: #000;
}
.main_image p {
	font-size: 1.2em;
	padding: 20px;	
	line-height: 1.6em;
}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 23px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
	text-align: center;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	color: #000000;
}
.tab_content p {
	padding: 20px;
	font-size: 1.2em;
	color: #000000;
	
}



</style>
<!--Call jQuery-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">


 
jQuery(document).ready(function() {
	//Show Banner
	jQuery(".main_image .desc").show(); //Show Banner
	jQuery(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	jQuery(".image_thumb ul li:first").addClass('active'); 
	jQuery(".image_thumb ul li").click(function(){ 
		//Set Variables
		var imgAlt = jQuery(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = jQuery(this).find('a').attr("href"); //Get Main Image URL
		//var imgDesc = jQuery(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = jQuery(".main_image").find('.block').height();	//Calculate height of block	
		
		if (jQuery(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			jQuery(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				jQuery(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				jQuery(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
		
		jQuery(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		jQuery(this).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		jQuery(this).addClass('hover');
		}, function() {
		jQuery(this).removeClass('hover');
	});
			
	//Toggle Teaser
	jQuery("a.collapse").click(function(){
		jQuery(".main_image .block").slideToggle();
		jQuery("a.collapse").toggleClass("show");
	});
	
		//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

		});//Close Function
</script>




 
<div id="main" class="container" >       			   

#set ($main_pro = $main_project.get('main_txt')) 
#if ( "$main_pro" != "" )								
	
     <div class="main_image">	
	 
			<div style="display: block;" class="desc">	




#set ($id = $tabs_menu.get('id'))
#set ($about = $tabs_menu.get('about'))
#set ($schedule = $tabs_menu.get('schedule'))
#set ($material = $tabs_menu.get('material'))
#set ($tools = $tabs_menu.get('tools'))




<div style="width: 985px; height: 440px; overflow: auto; padding: 5px">	
<ul class="tabs">
    <li><a href="#tab1" style="width: 149px;  height: 31px;"> </a></li>
    <li><a href="#tab2" style="width: 149px;  height: 31px;"></a></li>
	<li><a href="#tab3" style="width: 148px;  height: 31px;"> </a></li>
	<li><a href="#tab4" style="width: 145px;  height: 31px;"> </a></li>
	<li><a href="#tab5" style="width: 147px;  height: 31px;"></a></li>
	
		  
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
     <p>$id.getData()</p> 
    </div>
	
    <div id="tab2" class="tab_content">
	<p>$about.getData()</p> 
    </div>
	
	<div id="tab3" class="tab_content">
    <p>$schedule.getData()</p>
    </div>
	
	<div id="tab4" class="tab_content">
    <p>$material.getData()</p>
    </div>
	
	<div id="tab5" class="tab_content">
    <p>$tools.getData()</p>
    </div>

	
</div>



		</div>
	
		
		
	</div>
<div class="clear"></div>
</div>

				
#end
	


	</div> 											
</div>      										
    </div>
		</div>